<!--  -->
<template>
  <div class="block-item-item-wrapper hy-35J">
    <p class="title" ref="blockItemItemTitle">{{ params.name }}</p>
    <div class="value" :class="'value' + index" ref="blockItemItemBg">
      <p ref="blockItemItemValue">
        <span ref="blockItemItemNum">{{ num | fomatterNum }}</span
        >{{ params.unit }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      num: 0
    }
  },
  filters: {
    fomatterNum(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  props: ['params', 'index'],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init() {
      let _this = this
      let tl = new TimelineMax({})
      let blockItemItemTitle = TweenMax.to(this.$refs.blockItemItemTitle, 0.2, { opacity: 1 })
      let blockItemItemBg = TweenMax.to(this.$refs.blockItemItemBg, 0.3, {
        opacity: 1,
        scale: 1
      })
      let blockItemItemValue = TweenMax.to(this.$refs.blockItemItemValue, 0.3, { opacity: 1 })
      let value = TweenMax.to(this, 0.5, {
        num: () => _this.params.value,
        roundProps: ['num']
      })

      tl.addLabel('start')
        .add(blockItemItemTitle, 'start+=0')
        .add(blockItemItemBg, 'start+=0.2')
        .add(blockItemItemValue, 'start+=0.3')
        .add(value, 'start+=0.3')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.block-item-item-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .title {
    position: absolute;
    left: 5px;
    width: 75px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 18px;
    font-weight: bold;
    opacity: 0;
  }
  .value {
    position: absolute;
    width: 117px;
    height: 14px;
    top: 0;
    left: 80px;
    background: url('../../../assets/imgs/center/list-bg.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transform: scale(0);
    p {
      text-indent: 0px;
      font-size: 16px;
      color: #fff;
      line-height: 16px;
      font-weight: 700;
      text-align: center;
      span {
        font-size: 18px;
      }
    }
  }
  .value2 {
    background: url('../../../assets/imgs/center/list-bg1.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
